<template>
  <div class="page-content">
    <dovecote-info v-if="!showEcharts"></dovecote-info>
    <TableBar :showTop="false" :columns="columns" @changeColumn="changeColumn" @changeEcharts="changeEcharts">
      <div slot="bottom">
        <div>
          <el-button type="success" plain @click="exportExcel">导出Excel表格</el-button>
          <el-date-picker
            v-model="dateValue"
            type="date"
            @change="pickDate"
            value-format="yyyy-M-d"
            placeholder="选择日期"
          >
          </el-date-picker>
        </div>
      </div>
    </TableBar>
    <the-table
      :data="data"
      :showPage="false"
      ref="table"
      v-if="!showEcharts"
    >
      <el-table-column prop="dovecoteNumber" label="鸽棚编号" v-if="columns[0].show"></el-table-column>
      <el-table-column prop="matEggs" label="垫蛋数" v-if="columns[1].show"></el-table-column>
      <el-table-column prop="pictureEggs" label="照蛋数" v-if="columns[2].show"></el-table-column>
      <el-table-column prop="takeEggs" label="抽蛋数" v-if="columns[3].show"></el-table-column>
      <el-table-column prop="singleEggs" label="单蛋数" v-if="columns[4].show"></el-table-column>
      <el-table-column prop="unfertilizedEggs" label="未受精数" v-if="columns[5].show"></el-table-column>
      <el-table-column prop="damagedEggs" label="总踩蛋数" v-if="columns[6].show"></el-table-column>
      <el-table-column prop="badEggs" label="臭蛋数" v-if="columns[7].show"></el-table-column>
    </the-table>
    <div v-if="showEcharts && showFlag">
      <el-row :gutter="20">
        <el-col :span="12"><el-card><ChartsOne :data="chartsData.matEggs" :title="'近7天垫蛋数量'" :xTitle="chartsData.matEggsTitle"/></el-card></el-col>
        <el-col :span="12"><el-card><ChartsTwo :data="chartsData.pictureEggs" :title="'近7天照蛋数量'" :xTitle="chartsData.pictureEggsTitle"/></el-card></el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top: 20px">
        <el-col :span="12"><el-card><ChartsThree :data="chartsData.takeEggs" :title="'近7天抽蛋数量'" :xTitle="chartsData.takeEggsTitle"/></el-card></el-col>
        <el-col :span="12"><el-card><ChartsFour :data="chartsData.singleEggs" :title="'近7天单蛋数量'" :xTitle="chartsData.singleEggsTitle"/></el-card></el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top: 20px">
        <el-col :span="12"><el-card><ChartsFive :data="chartsData.unfertilizedEggs" :title="'近7天未受精数量'" :xTitle="chartsData.unfertilizedEggsTitle"/></el-card></el-col>
        <el-col :span="12"><el-card><ChartsSix :data="chartsData.damagedEggs" :title="'近7天总踩蛋数量'" :xTitle="chartsData.damagedEggsTitle"/></el-card></el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top: 20px">
        <el-col :span="12"><el-card><ChartsSeven :data="chartsData.badEggs" :title="'近7天臭蛋数量'" :xTitle="chartsData.badEggsTitle"/></el-card></el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import TableBar from "@/components/Dovecote/TableBar";
import ChartsOne from "@/components/Dovecote/ChartsOne";
import ChartsTwo from "@/components/Dovecote/ChartsTwo";
import ChartsThree from "@/components/Dovecote/ChartsThree";
import ChartsFour from "@/components/Dovecote/ChartsFour";
import ChartsFive from "@/components/Dovecote/ChartsFive";
import ChartsSix from "@/components/Dovecote/ChartsSix";
import ChartsSeven from "@/components/Dovecote/ChartsSeven";
import { getCageDaily, exportExcel, getSevenDayDetail } from '@/api/Dovecote/InfoManage/Daychart.js'
import { mapState } from "vuex";
export default {
  name: "DayChart",
  meta: {
    title: "日结报表",
  },
  components: {
    TableBar,
    ChartsOne,
    ChartsTwo,
    ChartsThree,
    ChartsFour,
    ChartsFive,
    ChartsSix,
    ChartsSeven
  },
  data() {
    return {
      queryInfo: {
        pageNum: 1,
        pageSize: 10
      },
      getCageInfo: {
        baseId: JSON.parse(window.sessionStorage.getItem('BaseInfo')).id,
        dovecoteNumber: '',
        year: 2021,
        month: 9,
        day: 1
      },
      data: [],
      value: "",
      options: [],
      dateValue: '',
      total: 0,
      showEcharts: false,
      columns: [
        { name: "鸽棚编号", show: true },
        { name: "垫蛋数", show: true },
        { name: "照蛋数", show: true },
        { name: "抽蛋数", show: true },
        { name: "单蛋数", show: true },
        { name: "未受精数", show: true },
        { name: "总踩蛋数", show: true },
        { name: "臭蛋数", show: true },
      ],
      chartsData: {
        matEggs: [],
        matEggsTitle: [],
        pictureEggs: [],
        pictureEggsTitle: [],
        takeEggs: [],
        takeEggsTitle: [],
        singleEggs: [],
        singleEggsTitle: [],
        unfertilizedEggs: [],
        unfertilizedEggsTitle: [],
        badEggs: [],
        badEggsTitle: [],
        damagedEggs: [],
        damagedEggsTitle: []
      },
      showFlag: false,
    };
  },
  computed: {
    ...mapState({
      dovecoteNumber: (state) =>
        state.Usersetting.CurrentDovecote.dovecoteNumber,
    }),
  },
  watch: {
    dovecoteNumber(val) {
      this.getCageInfo.dovecoteNumber = val;
      this.queryInfo.pageSize = 10;
      this.queryInfo.pageNum = 1;
      this.getCageDaily();
    },
  },
  created() {
    this.initTime();
    this.getCageDaily();
  },
  methods: {
    initTime() {
      const nowDate = new Date()
      this.getCageInfo.year =  nowDate.getFullYear();
      this.getCageInfo.month = nowDate.getMonth() + 1;
      this.getCageInfo.day = nowDate.getDate();
      this.dateValue = this.getCageInfo.year + '-' + this.getCageInfo.month + '-' + this.getCageInfo.day;
    },
    async getCageDaily() {
      await getCageDaily(this.getCageInfo).then(res => {
        if(res.data.statusCode === 20000) {
          this.data = [];
          this.data.push(res.data.data);
        } else {
          return this.$message.error('暂无数据！')
        }
      })
    },
    pickDate(e) {
      if(!e) {
        this.initTime()
      } else {
        const arr = e.split('-');
        this.getCageInfo.year = arr[0];
        this.getCageInfo.month = arr[1];
        this.getCageInfo.day = arr[2];
        this.dateValue = this.getCageInfo.year + '-' + this.getCageInfo.month + '-' + this.getCageInfo.day;
      }
      this.queryInfo.pageSize = 10;
      this.queryInfo.pageNum = 1;
      this.getCageDaily();
    },
    async exportExcel() {
      await exportExcel(this.getCageInfo.baseId).then(res => {
        if(res.status === 200) {
          console.log(res)
          const blob = new Blob([res.data], {  // res 为后台返回数据
            type: 'application/vnd.ms-excel;charset=utf-8', // 导出数据生成excel的格式设置
          });
          if ('download' in document.createElement('a')) {
            // 非IE下载
            const elink = document.createElement('a');
            elink.download = `日结报表.xlsx`;
            elink.style.display = 'none';
            elink.target = '_blank';
            elink.href = window.URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
          }
        }
      })
    },
    changeColumn(columns) {
      this.columns = columns;
      this.$refs.table.doLayout();
    },
    async changeEcharts(e) {
      this.showEcharts = e;
      this.showFlag = false;
      if(e === true) {
        await getSevenDayDetail(this.getCageInfo).then(async res => {
          console.log(res)
          if(res.data.statusCode === 20000) {
            this.chartsData = {
              matEggs: [],
              matEggsTitle: [],
              pictureEggs: [],
              pictureEggsTitle: [],
              takeEggs: [],
              takeEggsTitle: [],
              singleEggs: [],
              singleEggsTitle: [],
              unfertilizedEggs: [],
              unfertilizedEggsTitle: [],
              badEggs: [],
              badEggsTitle: [],
              damagedEggs: [],
              damagedEggsTitle: []
            };
            for(let item of res.data.data) {
              item.laborTime = item.gmtModified.slice(5, 10);
              this.chartsData.matEggs.push(item.matEggs);
              this.chartsData.pictureEggs.push(item.pictureEggs);
              this.chartsData.takeEggs.push(item.takeEggs);
              this.chartsData.singleEggs.push(item.singleEggs);
              this.chartsData.unfertilizedEggs.push(item.unfertilizedEggs);
              this.chartsData.badEggs.push(item.badEggs);
              this.chartsData.damagedEggs.push(item.damagedEggs);
              // 标题
              this.chartsData.matEggsTitle.push(item.laborTime);
              this.chartsData.pictureEggsTitle.push(item.laborTime);
              this.chartsData.takeEggsTitle.push(item.laborTime);
              this.chartsData.singleEggsTitle.push(item.laborTime);
              this.chartsData.unfertilizedEggsTitle.push(item.laborTime);
              this.chartsData.badEggsTitle.push(item.laborTime);
              this.chartsData.damagedEggsTitle.push(item.laborTime);
            }
          }
          this.showFlag = true;
        })
      }
    },
    // handleSizeChange(val) {
    //   this.queryInfo.pageSize = val;
    // },
    // handleCurrentChange(val) {
    //   this.queryInfo.pageNum = val;
    // }
  },
};
</script>

<style lang="scss" scoped>
.search {
  background-color: #fafafa;
  width: 100%;
  height: auto;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
  .search_input {
    display: inline-block;
    width: 300px;
    .el-button {
      background-color: #409eff;
      color: #fafafa;
    }
  }
}
.search_card {
  height: 100%;
}
.pagination {
  margin-top: 20px;
  text-align: center;
}
</style>